<style>
@import '../../styles/common.less';
@import '../../styles/loading.less';
@import '../../styles/picture.less';
.spacing {
    margin-top: 5px;
}
</style>

<template>
    <div>
        <Row class="spacing">
            <Col span="24">
            学员姓名 ：<Input v-model="query.name" clearable style="width: 20%"></Input>
            证件号  ：<Input v-model="query.cardcode" clearable style="width: 20%"></Input>
            手机号 ：<Input v-model="query.parentphone" clearable style="width: 20%"></Input>
                <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
                <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
            </Col>
        </Row>
        <Row class="spacing">
            <Col span="24">
                <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
            </Col>
        </Row>
        <div class="spacing">
            <Table border :columns="columns" :data="data" @on-row-click="setStudent" @on-row-dblclick="student = {}"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>

        <Modal
                v-model="editModal"
                width="60%"
                :loading="true"
                :draggable="true"
                :closable="true"
                :transfer="false"
                title="新增学生"
        >
            <Form :label-width="80" :model="formData" :rules="formDataRules" ref="formData">
                <Row>
                    <Col span="12">
                        <FormItem label="姓名:" prop="name">
                            <Input type="text" v-model="formData.name"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="性别:">
                            <Select v-model="formData.sex">
                                <Option v-for="item in sexList" :value="item.id" :key="item.id">{{item.name}}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="身份证号:">
                            <Input type="text" v-model="formData.cardcode"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="出生日期:" prop="birthdate">
                            <DatePicker type="date" v-model="formData.birthdate" style="width:100%"  confirm></DatePicker>
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="12">
                        <FormItem label="就读年级:">
                            <Select v-model="formData.gradeid">
                                <Option v-for="item in gradeList" :value="item.id" :key="item.id">{{item.name}}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="就读学校:">
                            <Input type="text" v-model="formData.school"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="家长姓名:">
                            <Input type="text" v-model="formData.parentname"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="家长手机号:" prop="parentphone">
                            <Input type="text" v-model="formData.parentphone"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="家庭电话:">
                            <Input type="text" v-model="formData.familyphone"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="学员英文名:">
                            <Input type="text" v-model="formData.ename"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="学生卡号:">
                            <Input type="text" v-model="formData.stundentcode"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="点到卡号:">
                            <Input type="text" v-model="formData.namingcode"></Input>
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="12">
                        <FormItem label="家庭地址:">
                            <Input type="textarea" v-model="formData.familyaddress"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="备注:">
                            <Input type="textarea" v-model="formData.remark"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <FormItem label="校区:" prop="areaId">
                            <RadioGroup v-model="formData.areaId" size="small">
                                <Radio v-for="(item,key) in areaList" :key="key" :label="item.id">
                                    <span>{{item.name}}</span>
                                </Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="save">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="editModal = false">取消</Button>
            </div>
        </Modal>

    </div>
</template>


<script>
    import util from '@/libs/util';
    import Cookies from 'js-cookie';
    import dateUtil from '../../util/getDate';

    export default {
        name: 'exportable-table',
        data () {
            return {
                columns: [{
                    title: ' ',
                    key: 'radio',
                    width: 50,
                    render: (h, params) => {
                        return h('Radio', {
                            props: {
                                'value': params.row.id === this.student.id
                            }
                        }, '');
                    }
                }, {
                    title: '姓名 ',
                    key: 'name'
                }, {
                    title: '性别',
                    key: 'sex',
                    render: (h, params) => {
                        return h('span', {}, params.row.sex === 'MAN' ? '男' : '女');
                    }
                }, {
                    title: '出生日期',
                    key: 'birthdate',
                    render: (h, params) => {
                        return h('span', {}, dateUtil.getDate(params.row.birthdate,'date'));
                    }
                }, {
                    title: '证件号',
                    key: 'cardcode'
                }, {
                    title: '家长姓名',
                    key: 'parentname'
                }, {
                    title: '家长手机号',
                    key: 'parentphone'
                }, {
                    title: '就读年级',
                    key: 'gradeid',
                    render: (h, params) => {
                        return h('div', {}, params.row.grade ? params.row.grade.name : '');
                    }
                }],
                baseuser: JSON.parse(Cookies.get('baseUser')),
                data: [],
                query: {},

                total: 0,
                pageIndex: 1,
                pageSize: 10,
                student: '',
                editModal: false,
                editTitle: '新增学员',
                formData:{},
                formDataRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    birthdate: [
                        { required: true, message: '请选择出生日期', trigger: 'change', type: 'date'}
                    ],
                    parentphone: [
                        { required: true, message: '请输入家长手机号', trigger: 'blur', type: 'string'}
                    ],
                    areaId:[
                        { required: true, message: '请选择校区', trigger: 'change', type: 'number'}
                    ]
                },
                sexList: [{id: 'MAN', name: '男'}, {id: 'WOMAN', name: '女'}],
                gradeList: [],
                areaList:[]
            };
        },
        mounted () {
            this.query = {};
            this.loadList();
        },
        methods: {
            loadList () {
                this.student = {};
                util.ajax.post('/busine/student/list', util.toFormData({
                    page: this.pageIndex,
                    size: this.pageSize,
                    organizeid: this.baseuser.orgId,
                    name: this.query.name ? this.query.name : '',
                    cardcode: this.query.cardcode ? this.query.cardcode : '',
                    parentphone: this.query.parentphone ? this.query.parentphone : ''
                })).then(res => {
                    this.data = res.data.data.list;
                    this.total = res.data.data.total;
                });
            },
            refresh () {
                this.query = {};
                this.loadList();
            },
            setStudent (row, index) {
                this.student = row;
            },
            showAdd () {
                this.editTitle = '新增学员';
                this.formData = {
                    organizeid: this.baseuser.orgId
                };
                this.editModal = true;
                util.ajax.post('/base/datadictionary/findByCode', util.toFormData({
                    CODE: 'GRADE'
                })).then(res => {
                    this.gradeList = res.data.data;
                });

                util.ajax.post('/base/datadictionary/findByCode', util.toFormData(// 获得区域
                    {CODE: 'AREA_TYPE'}
                )).then(res => {
                    if (res.data.code == 200) {
                        var data = res.data.data;
                        this.areaList = data;
                    } else {
                        this.$Message.error(res.data.message);
                    }
                });
            },
            save () {
                let formData = this.formData;
                formData.birthdate = (!formData.birthdate ?'': new Date(formData.birthdate));
                formData.gradeid = formData.gradeid ? formData.gradeid : '';
                this.$refs['formData'].validate((valid) => { // 表单验证
                    if (valid) {
                        util.ajax.post('/busine/student/save', util.toFormData(formData)).then(res => {
                            if (res.data.message === 'SUCCESS') {
                                this.$Message.success('保存成功！');
                                this.loadList();
                                this.editModal = false;
                            }
                        });
                    } else {
                        this.$Message.warning('请检查输入项！');
                    }
                });
            },
        }
    };
</script>